<template>
  <!--编写页面静态部分，即view部分-->
  <div>
    <el-select v-model="params.siteId" placeholder="请选择站点">
      <el-option
        v-for="item in selectSiteList"
        :key="item.siteId"
        :label="item.siteName"
        :value="item.siteId">
      </el-option>
    </el-select>
    <el-input v-model="params.templateName" style="width: 100px" placeholder="模板名称"></el-input>
    <el-input v-model="params.templateFileId" style="width: 100px" placeholder="模板文件id"></el-input>
    <el-button type="primary" size="small" @click="query">查询</el-button>
    <el-button type="primary" size="small" @click="reset">重置</el-button>&nbsp;&nbsp;
    <router-link class="mui‐tab‐item" :to="{path:'/cms/template/add/',query:{
       page: this.params.page,
       siteId: this.params.siteId }}">
      <el-button type="primary" size="small">新增模板</el-button>
    </router-link>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" width="60"></el-table-column>
      <!--<el-table-column prop="pageName" label="模板class" width="180"></el-table-column>-->
      <el-table-column prop="templateId" label="模板id" width="240"></el-table-column>
      <el-table-column prop="siteId" label="站点id" width="130"></el-table-column>
      <el-table-column prop="templateName" label="模板名称" width="150"></el-table-column>
      <el-table-column prop="templateParameter" label="模板参数" width="250"></el-table-column>
      <el-table-column prop="templateFileId" label="模板文件id" width="250"></el-table-column>
      <el-table-column label="操作" width="70">
        <template slot-scope="page">
          <el-button size="small" type="text" @click="edit(page.row.templateId)">编辑</el-button>
          <br/>
          <el-button size="small" type="text" @click="del(page.row.templateId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next"
      @current-change="changePage"
      @size-change="sizeChange"
      :current-page="params.page"
      :page-size="params.size"
      :page-sizes=[10,20,30,40,50]
      :total="total"
      style="float: right"
    >
    </el-pagination>
  </div>
</template>
<script>
  import * as cmsApi from '../api/cms'
  import system from '../../../base/api/system'
  /*编写页面静态部分，即model及vm部分。*/
  export default {
    data() {
      return {
        list: [],
        selectSiteList: [],
        total: 0,
        params: {
          page: 1,//页码
          size: 10,//每页显示个数
          siteId:'',
          templateName:'',
          templateFileId:'',
        }
      }
    },
    methods: {
      //查询
      query: function () {
        cmsApi.template_list(this.params.page, this.params.size, this.params).then((res)=>{
          for(var i=0; i<res.queryResult.list.length; i++){
            if (res.queryResult.list[i].siteId == '5a751fab6abb5044e0d19ea1'){
              res.queryResult.list[i].siteId = '门户主站';
              continue;
            }else{
              res.queryResult.list[i].siteId = '其他';
              continue;
            }
          }
          this.list = res.queryResult.list;
          this.total = res.queryResult.total;
        })
      },
      reset: function(){
        this.params.siteId = '';
        this.params.templateName = '';
        this.params.templateFileId = '';
        this.params.page = 1;
        this.query();
      },
      //查询站点列表
      querySite: function(){
        cmsApi.select_site_list().then((res)=>{
          this.selectSiteList = res.queryResult.list;
        })
      },
      //分页查询
      changePage: function (page) {
        // alert(page);
        this.params.page = page;
        this.query();
      },
      //每页显示数据大小
      sizeChange: function(size){
        this.params.size = size;
        this.query();
      },
      //打开修改页面
      edit: function(templateId){
        this.$router.push({
          path:'/cms/template/edit/'+templateId,query:{
            page: this.params.page,
            siteId: this.params.siteId}})
      },
      //删除页面
      del: function(templateId){
        this.$confirm('确认删除选中页面吗？','提示',{}).then((res=>{
          //调用template_del方法其你去服务端删除接口
          cmsApi.template_del(templateId).then((res)=>{
            if (res.success){
              this.$message.success("删除成功");
              this.query();
            } else{
              this.$message.error("删除失败");
            }
          })
        }))
      }
    },
    //调用钩子方法
    //created:vue实例已创建，但是DOM元素还没有渲染生成
    created(){
      //从路由上获取参数
      this.params.page = Number.parseInt(this.$route.query.page||1);
      this.params.siteId = this.$route.query.siteId||'';
    },
    //mounted: DOM元素渲染完成后调用
    mounted(){
      //当dom渲染完成后调用查询，达到进入页面立即查询效果
        this.query();
        this.querySite();
    }
  }
</script>
<style>
  /*编写页面样式，不是必须*/
</style>
